<template>
     <div>
       <el-form
           label-width="100px"
           style="max-width: 460px"
           class="fromBasePosition"
           :rules="rules"
           ref="form"
           :model="ruleForm"
       >
         <h3>系统登录</h3>

         <el-form-item label="用户名"  prop="username">
           <el-input v-model="ruleForm.username" placeholder="请输入用户名"/>
         </el-form-item>

         <el-form-item label="密码"  prop="password">
           <el-input v-model="ruleForm.password" type="password" placeholder="请输入密码"  show-password="true"/>
         </el-form-item>

         <el-form-item label="您的身份" prop="role">
           <el-select v-model="ruleForm.role" placeholder="请选择身份">
             <el-option label="管理员" value="1"></el-option>
             <el-option label="学生" value="0"></el-option>
           </el-select>
         </el-form-item>

         <el-button type="primary" @click="submit" :plain="true" >登录</el-button>

         <el-button type="success" @click="forRegister">注册</el-button>

       </el-form>

     </div>
</template>

<script>


import axios from "axios";

export default {
    data(){
        return{
          ruleForm:{
            username:"",
            password:"",
            role:''
          },
          rules:{
            username:[
              {required:true,trigger:'blur',message:'请输入用户名'},
            ],
            password: [
              {required:true,trigger:'blur',message:'请输入密码'},
            ],
            role:[
                {required:true,trigger:'blur',message:'请选择您的身份'},
            ]
          },
        };
    },
    methods:{
        // forLogin(){
        //     this.$router.push("/HomePage");
        // },
        forRegister(){
            this.$router.push("/Register");
        },
        submit(){
            //提交登录者的用户名、密码、和身份
            // console.log(this.ruleForm.username,this.ruleForm.password,this.ruleForm.role)
            var _this=this;
            axios({
              method:"post",
              url:'api/users/login',
              data:{
               "username":this.ruleForm.username,
                "password":this.ruleForm.password,
                "role":this.ruleForm.role
              }
            }).then(res=>{
              if(res.data.code === 200){
                //登录成功提示
                this.$message({
                  message:res.data.msg,
                  type: 'success'
                });
                //保存用户信息到本地

                axios({
                  method: "post",
                  url: "api/users/getByLikeUsername",
                  data:{
                    username: _this.ruleForm.username
                  }
                }).then(function (resp) {
                  // if (this.ruleForm.role==1)
                  resp.data.data.data[0].role = _this.ruleForm.role
                  // console.log(resp.data.data.data);
                  localStorage.setItem("userInfo", JSON.stringify(resp.data.data.data[0]))
                  _this.$router.push('HomePage')
                })

                
                //跳转到首页
                
              }else if(res.data.code === 500){
                this.$message({
                  message:res.data.msg,
                  type: 'warning'
                });
              }
            })


        }

    },


}

</script>
<style scoped>
.fromBasePosition{
  margin:180px auto;
  border: 1px solid #f6f6f6;
  padding: 35px 35px 15px 35px;
  background-color: #fff;
  border-radius: 15px;
  box-shadow: 0 0 25px #cac6c6;

}
.fromBasePosition >>> .el-form-item__label{
  text-align: center;
}
.fromBasePosition >>> .el-select{
  width:100%;
}

</style>